<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><el-button icon="el-icon-arrow-left" @click="back">
         {{$t('common.back')}}
        </el-button></span>
        <span style="padding-left: 20px">{{$t('domain-name.domainNameManagement')}}</span>
      </div>
      <PackageFunctionText :title="$t('package-function.domainName')" :siteId="ruleForm.site_id" identifying="number_domain_names" @emitPackageFunction="emitPackageFunction"/>
      <div class="text item">
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column align="center" label="ID">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('domain-name.domainName')">
            <template slot-scope="{row}">
              <span>{{ row.domain_name }}&nbsp;<el-tag v-if="row.is_default" type="info">{{$t('domain-name.defaultDomainName')}}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('common.creationTime')">
            <template slot-scope="{row}">
              <span>{{ row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('common.operate')" width="200">

            <template slot-scope="scope">
              <el-button plain size="mini" @click="onCertificate(scope.row)">{{$t('domain-name.certificateOperation')}}</el-button>

              <el-popconfirm
                v-if="!scope.row.is_default"
                :title="$t('common.areYouSureToDeleteTheContent')"
                @onConfirm="confirmDelete(scope.row)"
              >
                <el-button slot="reference" type="info" plain size="mini" icon="el-icon-delete"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div style="padding: 10px">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item :label="$t('domain-name.domainName')" prop="domain_name">
              <el-input v-model="ruleForm.domain_name" autocomplete="off" :disabled="domainNameDisabled"></el-input>
              <div>{{$t('domain-name.tipCname')}} <el-tag>handiwangluo.web.xiaozhulanjuwei.com</el-tag></div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="submitLoading" :disabled="domainNameDisabled" @click="submitForm('ruleForm')">{{$t('domain-name.addDomainName')}}</el-button>
              <el-button @click="resetForm('ruleForm')">{{$t('common.reset')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <CertificateFrom
      v-if="dialogCertificateVisible"
      :domainNameId="domainNameId"
      :dialogCertificateVisible="dialogCertificateVisible"
      @emitDialogCertificate="emitDialogCertificate"
    />
  </div>
</template>

<script>
import { getList, add, remove } from '@/api/domain-name'
import CertificateFrom from './components/CertificateFrom'
import PackageFunctionText from '@/components/PackageFunctionText/index'

export default {
  name: 'SiteDomainName',
  components: { CertificateFrom, PackageFunctionText },
  props: {
  },
  data() {
    return {
      ruleForm: {
        domain_name: '',
        site_id: ''
      },
      rules: {
        domain_name: [
          { required: true, message: this.$t('domain-name.pleaseEnterDomainName'), trigger: 'blur' }
        ]
      },
      list: [],
      submitLoading: false,
      dialogCertificateVisible: false,
      domainNameId: '',
      domainNameDisabled: false
    }
  },
  created() {
    this.ruleForm.site_id = this.$route.params && this.$route.params.id
    this.onList()
  },
  computed: {
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    onList() {
      getList({ site_id: this.ruleForm.site_id }).then(res => {
        this.list = res.data
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          add(this.ruleForm).then(res => {
            this.notifyMessage(res)
            this.submitLoading = false
          }).catch(res => {
            this.submitLoading = false
          })
        } else {
          return false
        }
      })
    },
    notifyMessage(res) {
      this.$notify({
        message: res.message,
        type: 'success',
        duration: 1 * 1000
      })
      this.ruleForm.domain_name = ''
      this.onList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    confirmDelete(value) {
      var _this = this
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      })
      remove(value.id).then(res => {
        this.$notify({
          message: res.message,
          type: 'success',
          duration: 1000
        })
        _this.onList()
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    onCertificate(value) {
      this.domainNameId = value.id
      this.dialogCertificateVisible = true
    },
    emitDialogCertificate({ dialogCertificateVisible }) {
      this.dialogCertificateVisible = dialogCertificateVisible
    },
    emitPackageFunction(data) {
      if (!data.extend?.package_package_function_status) {
        this.domainNameDisabled = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
